<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            h3{
                display: inline-block;
                background-color: antiquewhite;
            }
            h5{
                display: inline-block;
                background-color: rgb(212, 138, 41);
            }
            span{
                display: inline-block;
                background-color: rgb(110, 86, 55);
            }
        </style>
    </head>

    <body>
        <style></style>
        <div id="a">
            {{name}}
            <div style="display: flex; width: 100%">
                <div style="flex: 1" v-for="(mm,index) in money">{{mm}}</div>
            </div>
            <div style="display: flex; width: 100%">
                <div style="flex: 1" v-for="(mm,index) in money">
                    <div class="row" style="line-height: 50px;height: 50px;" v-for="(tt,jj) in month">
                        <h3 v-if="mm * tt>=400">{{mm * tt}}</h3>
                        <h5 v-else-if="mm * tt>360 && mm * tt<400 ">{{mm * tt}}</h5>
                        <span v-else>{{mm * tt}}</span>
                    </div>
                </div>
            </div>
        </div>
        <script>
            new Vue({
                data() {
                    return {
                        name: 'tom',
                        month: [12, 13, 14, 15, 16, 17, 18],
                        money: [1, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35],
                    };
                },
            }).$mount('#a');
        </script>
    </body>
</html>
